<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IconHunter V2 - 历史记录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#eef2ff',
                            100: '#e0e7ff',
                            200: '#c7d2fe',
                            300: '#a5b4fc',
                            400: '#818cf8',
                            500: '#6366f1',
                            600: '#4f46e5',
                            700: '#4338ca',
                            800: '#3730a3',
                            900: '#312e81'
                        },
                        pastel: {
                            blue: '#A7C7E7',
                            green: '#C1E1C1',
                            pink: '#FAC8C3',
                            yellow: '#FFF2B3',
                            purple: '#D1C2E0'
                        }
                    },
                    animation: {
                        'bounce-slow': 'bounce 3s infinite',
                        'pulse-slow': 'pulse 4s infinite',
                        'wiggle': 'wiggle 1.5s ease-in-out infinite',
                        'float': 'float 5s ease-in-out infinite',
                        'spin-slow': 'spin 8s linear infinite'
                    },
                    keyframes: {
                        wiggle: {
                            '0%, 100%': { transform: 'rotate(-2deg)' },
                            '50%': { transform: 'rotate(2deg)' },
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                }
            }
        }
    </script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            -webkit-user-select: none;
            user-select: none;
            overflow: hidden;
            background-color: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .category-pill {
            transition: all 0.3s ease;
        }
        
        .category-pill:hover {
            transform: scale(1.05);
        }
        
        .history-card {
            transition: all 0.3s ease;
        }
        
        .history-card:hover {
            transform: translateX(5px);
        }
        
        .download-btn {
            transition: all 0.3s ease;
        }
        
        .download-btn:hover {
            transform: scale(1.2);
        }
        
        .load-more-btn {
            transition: all 0.3s ease;
        }
        
        .load-more-btn:hover {
            transform: translateY(-3px);
        }
        
        .blob-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.05;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 446.3 261.8 C 444.4 324.3 416.9 385.5 369.3 418.1 C 321.7 450.7 254 454.8 199.9 429.5 C 145.8 404.2 105.4 349.4 90.6 290.4 C 75.8 231.4 86.6 168.1 119.7 119.8 C 152.8 71.5 208.1 38.2 266.1 34.2 C 324.1 30.2 384.7 55.5 422.7 101 C 460.7 146.5 476.1 212.2 466.2 270.6 C 463.3 290.8 453.9 310.5 446.3 261.8 Z' fill='%233b82f6'%3E%3C/path%3E%3C/svg%3E");
            background-size: cover;
            background-position: center;
        }
        
        .edit-btn {
            transition: all 0.3s ease;
        }
        
        .edit-btn:hover {
            transform: rotate(15deg);
        }
        
        .filter-btn {
            transition: all 0.3s ease;
        }
        
        .filter-btn:hover {
            transform: rotate(45deg);
        }
        
        .history-icon {
            transition: all 0.3s ease;
        }
        
        .history-card:hover .history-icon {
            transform: scale(1.1);
        }
        
        .time-badge {
            transition: all 0.3s ease;
        }
        
        .history-card:hover .time-badge {
            background-color: #818cf8;
            color: white;
        }
    </style>
</head>
<body class="bg-gradient-to-b from-blue-50 to-purple-50 h-screen relative">
    <div class="blob-background"></div>
    
    <!-- iOS 状态栏 -->
    <div class="bg-black text-white flex justify-between items-center px-4 py-2">
        <div class="text-sm font-medium">9:41</div>
        <div class="flex space-x-1">
            <i class="fa-solid fa-signal"></i>
            <i class="fa-solid fa-wifi"></i>
            <i class="fa-solid fa-battery-full"></i>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="h-[calc(100%-112px)] overflow-y-auto no-scrollbar">
        <!-- 头部 -->
        <div class="px-6 py-5 bg-white border-b border-gray-200">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <h1 class="text-2xl font-bold text-gray-800">下载历史</h1>
                    <div class="ml-2 w-6 h-6 text-primary-400 animate-pulse-slow">
                        <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
                        </svg>
                    </div>
                </div>
                <button class="edit-btn text-primary-500 text-sm font-medium bg-primary-50 px-3 py-1.5 rounded-full">
                    <i class="fa-solid fa-pen-to-square mr-1"></i>
                    编辑
                </button>
            </div>
        </div>

        <!-- 筛选选项 -->
        <div class="px-6 py-3 bg-white bg-opacity-70 backdrop-blur-sm border-b border-gray-200 flex items-center justify-between">
            <div class="flex space-x-2 overflow-x-auto no-scrollbar">
                <div class="category-pill bg-primary-500 text-white px-4 py-1.5 rounded-full text-sm font-medium whitespace-nowrap shadow-sm flex items-center">
                    <i class="fa-solid fa-layer-group mr-1.5 text-xs"></i>
                    全部
                </div>
                <div class="category-pill bg-white text-gray-700 px-4 py-1.5 rounded-full text-sm font-medium whitespace-nowrap border border-gray-200 shadow-sm flex items-center">
                    <i class="fa-brands fa-apple text-pastel-blue mr-1.5 text-xs"></i>
                    iOS
                </div>
                <div class="category-pill bg-white text-gray-700 px-4 py-1.5 rounded-full text-sm font-medium whitespace-nowrap border border-gray-200 shadow-sm flex items-center">
                    <i class="fa-brands fa-apple text-pastel-purple mr-1.5 text-xs"></i>
                    Mac
                </div>
                <div class="category-pill bg-white text-gray-700 px-4 py-1.5 rounded-full text-sm font-medium whitespace-nowrap border border-gray-200 shadow-sm flex items-center">
                    <i class="fa-solid fa-globe text-pastel-green mr-1.5 text-xs"></i>
                    网页
                </div>
            </div>
            <div class="filter-btn flex items-center text-gray-500 bg-white p-2 rounded-full shadow-sm border border-gray-200">
                <i class="fa-solid fa-filter"></i>
            </div>
        </div>

        <!-- 下载记录列表 -->
        <div class="px-6 py-4 bg-white">
            <!-- 今天 -->
            <div class="mb-6">
                <h2 class="text-gray-500 text-sm mb-3 flex items-center">
                    <div class="w-5 h-5 bg-primary-100 rounded-full flex items-center justify-center text-primary-500 mr-2">
                        <i class="fa-solid fa-calendar-day text-xs"></i>
                    </div>
                    今天
                </h2>
                
                <div class="history-card bg-white rounded-xl p-4 mb-3 shadow-sm flex items-center border border-gray-100 hover:shadow-md">
                    <div class="history-icon relative w-14 h-14 mr-4">
                        <div class="absolute inset-0 bg-gradient-to-br from-primary-300 to-primary-500 rounded-xl opacity-20 animate-pulse-slow"></div>
                        <img src="https://images.unsplash.com/photo-1613826488249-b67a21519743?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Figma" class="w-14 h-14 rounded-xl relative z-10 p-0.5">
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="text-base font-semibold text-gray-800">Figma</h3>
                            <span class="time-badge text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">10:23</span>
                        </div>
                        <div class="flex justify-between items-center mt-1">
                            <div class="flex items-center">
                                <div class="bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded-full font-medium mr-2 flex items-center">
                                    <i class="fa-brands fa-apple mr-1 text-xs"></i>
                                    iOS
                                </div>
                                <span class="text-xs text-gray-500">512x512</span>
                            </div>
                            <button class="download-btn text-primary-500 w-8 h-8 rounded-full bg-primary-50 flex items-center justify-center">
                                <i class="fa-solid fa-arrow-down"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="history-card bg-white rounded-xl p-4 mb-3 shadow-sm flex items-center border border-gray-100 hover:shadow-md">
                    <div class="history-icon relative w-14 h-14 mr-4">
                        <div class="absolute inset-0 bg-gradient-to-br from-green-300 to-green-500 rounded-xl opacity-20 animate-pulse-slow"></div>
                        <img src="https://images.unsplash.com/photo-1614332287897-cdc485fa562d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Figma.com" class="w-14 h-14 rounded-xl relative z-10 p-0.5">
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="text-base font-semibold text-gray-800">Figma.com</h3>
                            <span class="time-badge text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">09:15</span>
                        </div>
                        <div class="flex justify-between items-center mt-1">
                            <div class="flex items-center">
                                <div class="bg-green-100 text-green-600 text-xs px-2 py-0.5 rounded-full font-medium mr-2 flex items-center">
                                    <i class="fa-solid fa-globe mr-1 text-xs"></i>
                                    网页
                                </div>
                                <span class="text-xs text-gray-500">favicon.ico</span>
                            </div>
                            <button class="download-btn text-primary-500 w-8 h-8 rounded-full bg-primary-50 flex items-center justify-center">
                                <i class="fa-solid fa-arrow-down"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 昨天 -->
            <div class="mb-6">
                <h2 class="text-gray-500 text-sm mb-3 flex items-center">
                    <div class="w-5 h-5 bg-amber-100 rounded-full flex items-center justify-center text-amber-500 mr-2">
                        <i class="fa-solid fa-clock-rotate-left text-xs"></i>
                    </div>
                    昨天
                </h2>
                
                <div class="history-card bg-white rounded-xl p-4 mb-3 shadow-sm flex items-center border border-gray-100 hover:shadow-md">
                    <div class="history-icon relative w-14 h-14 mr-4">
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-300 to-blue-500 rounded-xl opacity-20 animate-pulse-slow"></div>
                        <img src="https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Slack" class="w-14 h-14 rounded-xl relative z-10 p-0.5">
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="text-base font-semibold text-gray-800">Slack</h3>
                            <span class="time-badge text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">18:42</span>
                        </div>
                        <div class="flex justify-between items-center mt-1">
                            <div class="flex items-center">
                                <div class="bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded-full font-medium mr-2 flex items-center">
                                    <i class="fa-brands fa-apple mr-1 text-xs"></i>
                                    iOS
                                </div>
                                <span class="text-xs text-gray-500">所有尺寸</span>
                            </div>
                            <button class="download-btn text-primary-500 w-8 h-8 rounded-full bg-primary-50 flex items-center justify-center">
                                <i class="fa-solid fa-arrow-down"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="history-card bg-white rounded-xl p-4 mb-3 shadow-sm flex items-center border border-gray-100 hover:shadow-md">
                    <div class="history-icon relative w-14 h-14 mr-4">
                        <div class="absolute inset-0 bg-gradient-to-br from-purple-300 to-purple-500 rounded-xl opacity-20 animate-pulse-slow"></div>
                        <img src="https://images.unsplash.com/photo-1595664652035-413d5a9b2903?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Sketch" class="w-14 h-14 rounded-xl relative z-10 p-0.5">
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="text-base font-semibold text-gray-800">Sketch</h3>
                            <span class="time-badge text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">15:30</span>
                        </div>
                        <div class="flex justify-between items-center mt-1">
                            <div class="flex items-center">
                                <div class="bg-purple-100 text-purple-600 text-xs px-2 py-0.5 rounded-full font-medium mr-2 flex items-center">
                                    <i class="fa-brands fa-apple mr-1 text-xs"></i>
                                    Mac
                                </div>
                                <span class="text-xs text-gray-500">SVG</span>
                            </div>
                            <button class="download-btn text-primary-500 w-8 h-8 rounded-full bg-primary-50 flex items-center justify-center">
                                <i class="fa-solid fa-arrow-down"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 本周 -->
            <div>
                <h2 class="text-gray-500 text-sm mb-3 flex items-center">
                    <div class="w-5 h-5 bg-pink-100 rounded-full flex items-center justify-center text-pink-500 mr-2">
                        <i class="fa-solid fa-calendar-week text-xs"></i>
                    </div>
                    本周
                </h2>
                
                <div class="history-card bg-white rounded-xl p-4 mb-3 shadow-sm flex items-center border border-gray-100 hover:shadow-md">
                    <div class="history-icon relative w-14 h-14 mr-4">
                        <div class="absolute inset-0 bg-gradient-to-br from-pink-300 to-pink-500 rounded-xl opacity-20 animate-pulse-slow"></div>
                        <img src="https://images.unsplash.com/photo-1611162616305-c69b3710ff62?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Instagram" class="w-14 h-14 rounded-xl relative z-10 p-0.5">
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="text-base font-semibold text-gray-800">Instagram</h3>
                            <span class="time-badge text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">星期三</span>
                        </div>
                        <div class="flex justify-between items-center mt-1">
                            <div class="flex items-center">
                                <div class="bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded-full font-medium mr-2 flex items-center">
                                    <i class="fa-brands fa-apple mr-1 text-xs"></i>
                                    iOS
                                </div>
                                <span class="text-xs text-gray-500">256x256</span>
                            </div>
                            <button class="download-btn text-primary-500 w-8 h-8 rounded-full bg-primary-50 flex items-center justify-center">
                                <i class="fa-solid fa-arrow-down"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="history-card bg-white rounded-xl p-4 mb-3 shadow-sm flex items-center border border-gray-100 hover:shadow-md">
                    <div class="history-icon relative w-14 h-14 mr-4">
                        <div class="absolute inset-0 bg-gradient-to-br from-green-300 to-green-500 rounded-xl opacity-20 animate-pulse-slow"></div>
                        <img src="https://images.unsplash.com/photo-1611162617213-7d7a39e9b1d7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Spotify" class="w-14 h-14 rounded-xl relative z-10 p-0.5">
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="text-base font-semibold text-gray-800">Spotify</h3>
                            <span class="time-badge text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">星期二</span>
                        </div>
                        <div class="flex justify-between items-center mt-1">
                            <div class="flex items-center">
                                <div class="bg-blue-100 text-blue-600 text-xs px-2 py-0.5 rounded-full font-medium mr-2 flex items-center">
                                    <i class="fa-brands fa-apple mr-1 text-xs"></i>
                                    iOS
                                </div>
                                <span class="text-xs text-gray-500">PNG</span>
                            </div>
                            <button class="download-btn text-primary-500 w-8 h-8 rounded-full bg-primary-50 flex items-center justify-center">
                                <i class="fa-solid fa-arrow-down"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="history-card bg-white rounded-xl p-4 mb-3 shadow-sm flex items-center border border-gray-100 hover:shadow-md">
                    <div class="history-icon relative w-14 h-14 mr-4">
                        <div class="absolute inset-0 bg-gradient-to-br from-red-300 to-red-500 rounded-xl opacity-20 animate-pulse-slow"></div>
                        <img src="https://images.unsplash.com/photo-1569017388730-020b5f80a004?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="Adobe XD" class="w-14 h-14 rounded-xl relative z-10 p-0.5">
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="text-base font-semibold text-gray-800">Adobe XD</h3>
                            <span class="time-badge text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">星期一</span>
                        </div>
                        <div class="flex justify-between items-center mt-1">
                            <div class="flex items-center">
                                <div class="bg-purple-100 text-purple-600 text-xs px-2 py-0.5 rounded-full font-medium mr-2 flex items-center">
                                    <i class="fa-brands fa-apple mr-1 text-xs"></i>
                                    Mac
                                </div>
                                <span class="text-xs text-gray-500">512x512</span>
                            </div>
                            <button class="download-btn text-primary-500 w-8 h-8 rounded-full bg-primary-50 flex items-center justify-center">
                                <i class="fa-solid fa-arrow-down"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 加载更多按钮 -->
            <div class="flex justify-center py-5">
                <button class="load-more-btn bg-white text-primary-500 px-5 py-2.5 rounded-full shadow-sm border border-primary-100 font-medium flex items-center hover:shadow-md transition-all">
                    <i class="fa-solid fa-spinner mr-2"></i>
                    加载更多记录
                </button>
            </div>
            
            <!-- 统计信息 -->
            <div class="mt-2 mb-8 bg-white rounded-xl p-4 border border-gray-200 shadow-sm">
                <div class="text-center">
                    <p class="text-gray-500 text-sm">已下载 <span class="text-primary-500 font-medium">32</span> 个图标</p>
                    <div class="w-full h-1 bg-gray-200 rounded-full mt-2 overflow-hidden">
                        <div class="h-full w-3/4 bg-gradient-to-r from-primary-400 to-primary-600 rounded-full"></div>
                    </div>
                    <p class="mt-2 text-xs text-gray-400">会员容量：75%</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bg-white fixed bottom-0 w-full h-20 shadow-lg border-t border-gray-200 flex justify-around items-center px-6 rounded-t-3xl">
        <a href="#" class="flex flex-col items-center text-gray-400">
            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-house text-xl"></i>
            </div>
            <span class="text-xs">首页</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-400">
            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-magnifying-glass text-xl"></i>
            </div>
            <span class="text-xs">搜索</span>
        </a>
        <a href="#" class="flex flex-col items-center text-primary-500 relative">
            <div class="w-12 h-12 bg-primary-50 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-clock-rotate-left text-xl"></i>
            </div>
            <span class="text-xs font-medium">历史</span>
            <span class="absolute w-1.5 h-1.5 bg-primary-500 rounded-full -bottom-1"></span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-400">
            <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1">
                <i class="fa-solid fa-gear text-xl"></i>
            </div>
            <span class="text-xs">设置</span>
        </a>
    </div>
</body>
</html> 